<template>
    <div>
        <div class="contanier">
            <i @click="backTo"></i>
            <div class="box">
                <h1>注册</h1>
                <input type="text" placeholder="请输入账号" v-model="acc">
                <input type="password" placeholder="请输入密码" v-model="pwd">
                <button @click="registerFn">注册</button>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { register } from '../api/request'
import { Dialog } from 'vant';
import { ref } from 'vue'
import { Toast } from 'vant'
const acc = ref<string>('')
const pwd = ref<string>('')
const registerFn = async () => {
    if (acc.value === '' || pwd.value === '') {
        ElMessage({
            message: '输入框不能为空',
            type: 'warning',
            plain: true,
        })
    }
    else {
        const res = /^1[3-9]\d{9}$/
        if (!res.test(acc.value)) {
            Toast('手机号格式不正确！')
            return false;
        }
        if (pwd.value.length < 6) {
            Toast('密码不能少于6位！')
            return false
        }
        const content = await register({ account: acc.value, password: pwd.value })
        const { code } = content
        // console.log(content)
        if (code == 200) {
            Dialog.confirm({
                title: '提示',
                message: '注册成功，是否登录？',
            })
                .then(() => {
                    setTimeout(() => {
                        $router.replace({ path: '/login' })
                    }, 150)
                })
                .catch(() => {
                    return;
                });
            acc.value = '';
            pwd.value = '';
        }
        else {
            ElMessage({
                message: '注册失败',
                type: 'error',
                plain: true,
            })
        }
    }
}
const $router = useRouter()
const backTo = () => {
    $router.go(-1)
}
</script>
<style scoped lang="scss">
@import '../common/scss/variable.scss';

.contanier {
    width: 90%;
    margin: 0 auto;
    margin-top: 40px;

    i {
        display: block;
        width: 13px;
        height: 12px;
        background-image: url(../assets/img/icon.png);
    }

    .box {
        width: 100%;
        height: 360px;
        margin: 120px auto 0;

        h1 {
            padding-top: 20px;
            font-size: 36px;
            text-align: center;
            margin-bottom: 20px;
        }

        input,
        button {
            width: 100%;
            height: 52px;
            margin-top: 10px;
            padding-left: 20px;
            box-sizing: border-box;
            border-radius: 10px;
        }

        button {
            background-color: $bgColor;
            border: 0;
            font-size: 13px;
            color: #fff;
        }
    }
}
</style>